<template>
    <div class="product-comment">
        <div class="comment-bd">
            <div class="comment-card" v-for="(order,index) in detail.orderItems" :key="index">
                <card :imgSrc="order.modelImageUrl" :name="order.productTitle" style="margin-bottom:.2rem">
                    <div class="good-desc">
                        <span class="good-desc-info">{{order.modelName}} {{order.modelSize}}</span>
                    </div>
                    <div class="good-price">
                        <span class="price-icon">￥</span>
                        <span class="good-price-num">{{order.modelSalePrice}}</span>
                    </div>
                    <div class="good-count good-comment" v-if="order.orderItemsStatus=='EVALUATION'" @click="linkTo('giveComment',order.id, order.orderItemsStatus)" >
                        评价
                    </div>
                    <div class="good-count good-comment" v-else-if="order.orderItemsStatus == 'COMPLETED'" @click="linkTo('giveComment',order.id, order.orderItemsStatus)">
                        查看评价
                    </div>
                </card>
            </div>
        </div>

    </div>

</template>

<script>
	import CONSTANT from "../../../wechat/static/constant/urlconstant";
	import common from "../../../wechat/static/common/common";
	import card from '../common/Goods-card.vue'
	const testimg1 = require('../../images/test.png');
	export default {
		data(){
			return{
				orders:[
					{
						code:'11089577332',
						status:'待评价',
						goods:[
							{
								name:'宝得适britax百变骑士汽车儿童安全座椅isofix9个月+12岁很长很长很长很长',
								img:testimg1,
								selected:false,
								desc:{
									color:'黄色',
									length:'两米',
								},
								price:'158.00',
								delPrice:59.9,
								count:2,
							},
							{
								name:'宝得适britax百变骑士汽车儿童安全座椅isofix9个月+12岁很长很长很长很长',
								img:testimg1,
								selected:false,
								desc:{
									color:'黄色',
									length:'两米',
								},
								price:'158.00',
								delPrice:59.9,
								count:1,
							}
						]
					},
					{
						code:'11089577332',
						status:'已评价',
						goods:[
							{
								name:'宝得适britax百变骑士汽车儿童安全座椅isofix9个月+12岁很长很长很长很长',
								img:testimg1,
								selected:false,
								desc:{
									color:'黄色',
									length:'两米',
								},
								price:'158.00',
								delPrice:59.9,
								count:1,
							},
							{
								name:'宝得适britax百变骑士汽车儿童安全座椅isofix9个月+12岁很长很长很长很长',
								img:testimg1,
								selected:false,
								desc:{
									color:'黄色',
									length:'两米',
								},
								price:'158.00',
								delPrice:59.9,
								count:1,
							}
						]
					},
				],
				commenttypes:[
					{type:'待评价',number:12},
					{type:'已评价',number:12}
				],
				curIndex:'待评价',
				detail: {}
			}
		},
        mounted(){
			this.getDetail()
        },
		methods:{
			getDetail() {
				let url = CONSTANT.ORDER.ORDERDETAIL
				common.get(url, this.$route.query.code, (res) => {
					if (res.code == 200) {
						this.detail = res.data.bussData
					}
				})
			},
			changecommentType(e){
				this.curIndex = e;
			},
			linkTo(link,id, status){
				this.$router.push({
					path:link,
					query:{
						id:id,
                        status: status
					}

				})

			}
		},
		components:{
			card,
		}

	}
</script>
<style lang="less">
    .product-comment{
        position: relative;
        .comment-bar{
            height:.88rem;
            background:rgba(242,242,242,1);
            display: flex;
            align-items: center;
            font-size:.28rem;
            font-family:PingFang-SC-Medium;
            font-weight:500;
            color:rgba(153,153,153,1);
            line-height:.22rem;
            padding: 0 1.96rem 0 1.58rem;
            justify-content: space-between;
            margin-bottom: .07rem;
            .wait-comment{
                position: relative;
                display: block;
                font-size:.32rem;
                font-family:PingFang-SC-Bold;
                font-weight:bold;
                color:rgba(126,86,198,1) !important;
                line-height:.22rem;
            }
            .wait-comment::after{
                content: "";
                position: absolute;
                top: .50rem;
                left: .62rem;
                width:.29rem;
                height:.05rem;
                background:rgba(126,86,198,1);
                border-radius:.03rem;
                display: block;

            }


        }
        .comment-bd{
            // background: white;
            // padding-left:.25rem;
            // padding-right:.25rem;
            box-sizing: border-box;
            margin-bottom:.2rem;
            .card{
                padding-left:.25rem;
                padding-right:.25rem;
                box-sizing: border-box;
                border-bottom:.01rem solid rgba(238,238,238,.6);
                border-top:.01rem solid rgba(238,238,238,.6);
                .goods-item-content{
                    box-sizing: border-box;
                    height:2.3rem;
                    padding-top:0rem;
                    .good-desc{
                        .good-desc-info{
                            font-size:.26rem;
                            font-family:PingFang-SC-Light;
                            color:rgba(158,158,158,1);
                            line-height:.5rem;
                            margin-right:.2rem;
                        }
                    }
                    .good-price{
                        position: absolute;
                        bottom:0.1rem;
                        color:rgba(126,86,198,1);
                        .good-price-num{
                            font-size:.31rem;
                            font-family:PingFang-SC-Light;
                            line-height:.52rem;
                        }
                    }
                    .good-count{
                        position:absolute;
                        bottom:0.1rem;
                        right:0;
                        color:#666666;
                        font-size: .26rem;
                        font-family:PingFang-SC-Medium;
                    }
                    .good-comment{
                        width:1.88rem;
                        height:.56rem;
                        border:.02rem solid;
                        // border-image:linear-gradient(111deg, rgba(126,86,198,1), rgba(98,123,230,1)) 2 2;
                        border-radius:.28rem;
                        font-size:.28rem;
                        font-family:PingFang-SC-Medium;
                        font-weight:500;
                        color:rgba(126,86,198,1);
                        line-height:.56rem;
                        text-align: center;
                    }
                }
            }
        }
    }

</style>
